<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<!-- 网页不允许用户缩放 -->
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<style type="text/css">
		
		@media screen and (min-width: 320px) and (max-width: 400px){
		body{
			background-color: #f00;
		}
	}
		@media screen and (min-width: 375px) and (max-width: 800px){
		body{
			background-color: #f0f;
		}
	}
		@media screen and (min-width: 414px) and (max-width: 1000px){
		body{
			background-color: #ff0;
		}
	}
		@media screen and (min-width: 768px) and (max-width: 1200px){
		body{
			background-color: #489521;
		}
	}
	</style>
</head>
<body>
	1 响应式：同一个网站可以适配多个终端（设备）
	2 实现方式：
		核心：媒体查询
		具体步骤：
			1设置meta标签
				<!-- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> -->
			2 使用媒体查询
				通过访问设备宽度，根据不同宽度居间进行效果显示
</body>
</html>